<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
    .v-enter {
        opacity: 0;
    }
    .v-enter-to {
        opacity: 1;
    }
    .v-enter-active {
        transition: opacity 3s;
    }
    .v-leave {
        opacity: 1;
    }
    .v-leave-to {
        opacity: 0;
    }
    .v-leave-active {
        transition: opacity 2s;
    }
    </style>
</head>

<body>
    <!-- 
     
     -->
    <div id="root">
        <transition-group>
            <div :key="item.id" v-for="item of list">{{item.title}}</div>
        </transition-group>
        <button @click="handclick">添加</button>
    </div>
    <script type="text/javascript">
    var count = 0;
    var vm = new Vue({
        el: "#root",
        data: {
            list: []
        },
        methods: {
            handclick: function() {
                this.list.push({
                    id: count++,
                    title: "hell world"
                })
            }
        }
    })
    </script>
</body>

</html>